<script setup>
import {listAdvertise,randomAdvertise} from "@/api/system/advertise.js";
import {ref, reactive, toRefs} from "vue";
import {useRouter} from "vue-router";
import * as lodash from 'loadsh'



const router = useRouter()
const data = ref([])

const randomPick = ()=>{
  randomAdvertise().then(res=>{
    let resp = res.data
  })
}
const getList = () => {
  return randomAdvertise().then(response => {
    data.value = response.data
  })
}
getList().then(()=>{
  data.value.forEach(item=>{
    let title = item.title
    fetch("http://localhost:7788/expose/"+title)
  })
})
const go = (item)=>{
  let obj = {
    id:item.id,
    title:item.title,
    pic:item.pic,
    createdTime:item.createdTime,
    content:item.content,
    cate:item.cate
  }
  router.push({
    path:'/system/ad-detail',
    query:obj
  })
}
</script>

<template>
<div class="tw-grid tw-grid-cols-4 tw-gap-3 tw-p-10">
  <div v-for="item in data" :key="item.id">
      <el-card class=" hover:tw-cursor-pointer" @click="()=>{go(item)}">
        <img class="tw-rounded-2xl tw-border tw-m-auto" style="height: 200px;width: 200px" :src="'http://localhost/dev-api' + item.pic"  />
        <el-divider></el-divider>
        <div class="tw-text-2xl">
          <span>
          {{item.title}}
          </span>
          <span class="tw-ml-3">
          <el-tag >
            {{item.createdTime}}
          </el-tag>
          </span>

        </div>
      </el-card>

    </div>
</div>
</template>

<style scoped >

</style>